import { Select } from 'antd';
import { useDispatch } from 'dva';
const { Option } = Select;
import React, { useState } from 'react';
import { ISurveyHook } from '../../../utils/Survey/SurveyHook';
import AuthCompount from '../../AuthCompount/AuthCompount';
import './FormSelect.scss';
const isPc = window.screen.width > 500;
// tslint:disable-next-line:no-any
declare var window: any;
/**
 * 输入封装
 * 在subjectData里面type为input
 * 三种型号 big sm mid
 */
function FormSelect(props: ISurveyHook) {
  const formObj = props.formObj.subjectData;
  const [seleVal, setSeleVal] = useState(formObj.defaultValue);
  const dispatch = useDispatch();
  function inputChange(str: string) {
    dispatch({
      type: 'survey/changeForm',
      payload: {
        props,
        val: str,
      },
    });
    setSeleVal(str);
  }

  /**
   * 用户点击回显上次方式的监听
   * 直接触发当前组件的渲染
   */
  // tslint:disable-next-line:no-any
  window[`onlastSurvey_${formObj.field}`] = (value: any, field: string) => {
    setSeleVal(value);
  };

  return (
    <div id="FormSelect">
      <div className="form_box">
        <div className="tit_box">
          <AuthCompount isShow={!!props.formObj.validatorData.required}>
            <div
              // tslint:disable-next-line:jsx-no-multiline-js
              className={formObj.errMsg ? 'cl star' : 'star'}
            >
              *
            </div>
          </AuthCompount>
          <div className="cln">{formObj.subjectName}</div>
        </div>
        <AuthCompount isShow={!!formObj.explain}>
          <div className="explain">（说明：{formObj.explain}）</div>
        </AuthCompount>
        <Select
          className={`form_input`}
          placeholder={formObj.placeholder}
          defaultValue={formObj.defaultValue}
          value={seleVal}
          onChange={inputChange}
          allowClear={true}
          showSearch={true}
          optionFilterProp="children"
          // tslint:disable-next-line:jsx-no-multiline-js
          filterOption={true}
          getPopupContainer={() => document.getElementById('scrl_box')!}
        >
          {// tslint:disable-next-line:jsx-no-multiline-js
          formObj.selectOpts &&
            formObj.selectOpts.map(item => (
              <Option key={item.name} value={item.value}>
                {item.name}
              </Option>
            ))}
        </Select>
        <AuthCompount isShow={isPc}>
          <div className="errMsg">{formObj.errMsg}</div>
        </AuthCompount>
      </div>
      <AuthCompount isShow={!isPc}>
        <div className="m_errMsg">{formObj.errMsg}</div>
      </AuthCompount>
    </div>
  );
}
export default FormSelect;
